import { Form, Input, Button, Checkbox, message } from 'antd'
import { userLogin, userRegister } from '../../server'
import { useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './index.scss'
function Login() {
	const navigate = useNavigate()
	// 定义变量
	const [loading, setLoading] = useState(false) //登录过渡
	const [initValue] = useState({
		account: 'admin',
		remember: true,
	})
	const [isLogin, setIsLogin] = useState(true)
	const fromRef = useRef(null)
	// ------------------------------
	useEffect(() => {
		if (isLogin) {
			fromRef.current.setFieldsValue({
				account: 'admin',
				remember: true,
				name: '',
			})
		} else {
			fromRef.current.setFieldsValue({
				account: '',
				name: '',
				remember: false,
				password: '',
			})
		}
	}, [isLogin])
	// --------表单方法--------------------
	// 登录
	const onFinish = (values) => {
		// 登录过渡效果
		setLoading(true)
		const { account, password } = values

// fetch('http://172.20.10.2:8080/test/saveStudentInfo', {
//     method: 'post',
//     body: {
// 		name : account,
// 		age:password
// 	},
//     headers: {
//       'Content-Type': 'application/json'
//     }
//   }).then(function(data) {
//      console.log(data)
//   })
		// 登录api
		userLogin({ account, password }).finally((res) => {
			// if (res.includes('err')) {
			// 	message.warn('登录失败')
			// } else {
			message.success('登录成功')
			// }
			setLoading(false)
			localStorage.setItem('token', '我是token')
			setTimeout(() => {
				localStorage.removeItem('token')
				navigate('/login', { state: [123, 234] })
				message.warn('tocken过期 , 请重新登录')
			}, 30 * 60 * 1000)
			navigate('/home', { state: [123, 234] })
		})
	}
	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo)
	}
	// 切换标识
	const cut = () => {
		setIsLogin(!isLogin)
	}
	const register = () => {
		fromRef.current.validateFields().then((res) => {
			const { name, account, password } = fromRef.current.getFieldsValue()
			userRegister({ name, account, password }).then((res) => {
				message.success('注册成功')
			})
		})
	}
	return (
		<>
			<div className="index">
				{/* 背景图 */}
				<video
					className="bg_video"
					src={require('../../resource/bg_video.mp4')}
					muted="src"
					autoPlay="autoplay"
					loop
				></video>
				{/* 顶部文字 */}
				<h1>前端知识分享平台</h1>
				{/* 登录框 */}
				<div className="loginModel">
					{/* 切换标识 */}
					<span className="switch" onClick={cut}>
						{isLogin ? '切换至注册' : '切换至登录'}
					</span>
					<div className="title">
						{isLogin ? 'LOGIN' : 'REGISTER'}
					</div>
					{/* 输入表单 */}
					<Form
						ref={fromRef}
						name="basic"
						labelCol={{
							span: 5,
							offset: 2,
						}}
						wrapperCol={{
							span: 14,
						}}
						initialValues={initValue}
						onFinish={onFinish}
						onFinishFailed={onFinishFailed}
						autoComplete="off"
					>
						{!isLogin ? (
							<Form.Item
								label="用户名"
								name="name"
								rules={[
									{
										required: true,
										message: '请输入用户名!',
									},
								]}
							>
								<Input bordered={false} />
							</Form.Item>
						) : null}
						<Form.Item
							label="昵称"
							name="account"
							rules={[
								{
									required: true,
									message: '请输入昵称!（提示 : admin）',
								},
							]}
						>
							<Input bordered={false} />
						</Form.Item>
						<Form.Item
							label="密码"
							name="password"
							rules={[
								{
									required: true,
									message: '请输入密码! (提示 : 123456)',
								},
							]}
							wrapperCol={{
								span: 14,
								offset: 0,
							}}
						>
							<Input.Password
								autoComplete="off"
								bordered={false}
							/>
						</Form.Item>
						<Form.Item
							name="remember"
							valuePropName="checked"
							wrapperCol={{
								span: 8,
								offset: 13,
							}}
						>
							<Checkbox>记住密码</Checkbox>
						</Form.Item>
						{isLogin ? (
							<Form.Item
								wrapperCol={{
									offset: 3,
									span: 18,
								}}
							>
								<Button
									loading={loading}
									type="primary"
									htmlType="submit"
								>
									登录
								</Button>
							</Form.Item>
						) : null}
						{!isLogin ? (
							<Form.Item
								wrapperCol={{
									offset: 3,
									span: 18,
								}}
							>
								<Button type="primary" onClick={register}>
									注册
								</Button>
							</Form.Item>
						) : null}
					</Form>
				</div>
			</div>
		</>
	)
}
export default Login
